import PropTypes from 'prop-types'
import React from 'react'
// import CSSModules from 'browser/lib/CSSModules'
// import styles from './SideNavFilter.styl'
import i18n from '../lib/i18n'
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
/**
 * @param {boolean} isFolded
 * @param {boolean} isHomeActive
 * @param {Function} handleAllNotesButtonClick
 * @param {boolean} isStarredActive
 * @param {Function} handleStarredButtonClick
 * @return {React.Component}
 */
const SideNavFilter = ({
  isFolded,
  isHomeActive,
  handleAllNotesButtonClick,
  isStarredActive,
  handleStarredButtonClick,
  isTrashedActive,
  handleTrashedButtonClick,
  counterDelNote,
  counterTotalNote,
  counterStarredNote,
  handleFilterButtonContextMenu
}) => (
  <List className={isFolded ? 'menu--folded' : 'menu'}>
    <ListItem button
      className={isHomeActive ? 'menu-button--active' : 'menu-button'}
      onClick={handleAllNotesButtonClick}
    >
      <ListItemIcon>
        <img
          src={
            isHomeActive
              ? '../resources/icon/icon-all-active.svg'
              : '../resources/icon/icon-all.svg'
          }
        />
      </ListItemIcon>
      <ListItem className='menu-button-label'>{i18n.__('All Notes')}</ListItem>
      <ListItem className='counters'>{counterTotalNote}</ListItem>
    </ListItem>

    <ListItem button
      className={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
      onClick={handleStarredButtonClick}
    >
      <ListItemIcon>
        <img
          src={
            isStarredActive
              ? '../resources/icon/icon-star-active.svg'
              : '../resources/icon/icon-star-sidenav.svg'
          }
        />
      </ListItemIcon>
      <ListItem className='menu-button-label'>{i18n.__('Starred')}</ListItem>
      <ListItem className='counters'>{counterStarredNote}</ListItem>
    </ListItem>

    <ListItem button
      className={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
      onClick={handleTrashedButtonClick}
      onContextMenu={handleFilterButtonContextMenu}
    >
      <ListItemIcon>
        <img
          src={
            isTrashedActive
              ? '../resources/icon/icon-trash-active.svg'
              : '../resources/icon/icon-trash-sidenav.svg'
          }
        />
      </ListItemIcon>
      <ListItem className='menu-button-label'>{i18n.__('Trash')}</ListItem>
      <ListItem className='counters'>{counterDelNote}</ListItem>
    </ListItem>
  </List>
)

SideNavFilter.propTypes = {
  isFolded: PropTypes.bool,
  isHomeActive: PropTypes.bool.isRequired,
  handleAllNotesButtonClick: PropTypes.func.isRequired,
  isStarredActive: PropTypes.bool.isRequired,
  isTrashedActive: PropTypes.bool.isRequired,
  handleStarredButtonClick: PropTypes.func.isRequired,
  handleTrashedButtonClick: PropTypes.func.isRequired
}

export default SideNavFilter;// CSSModules(SideNavFilter, styles)
